<template>
  <!-- 基本信息 -->
  <div class="content">
    <div class="header">
      <h3 class="blue-bg">基本信息</h3>
    </div>
    <div class="body">
      <el-card>
        <div slot="header">账号信息</div>
        <!-- 内容 -->
        <div class="body-wrap">
          <p>用户名称：<span>haohao</span></p>
          <p>员工姓名：<span>李好好</span></p>
          <p>角色名称：<span>超级管理员</span></p>
          <p>手机号码：<span>18800006666</span></p>
          <p>用户邮箱：<span>haohao@360.com</span></p>
          <p>账号状态：<span>正常</span></p>
          <p>创建日期：<span>2022-11-11</span></p>
        </div>
      </el-card>
    </div>
    <!-- 按钮操作 -->
    <div class="content-btn">
      <el-button type="primary" @click="editOpen()">修改密码</el-button>
      <el-button type="primary">修改绑定</el-button>
      <el-button type="danger">退出登录</el-button>
    </div>
    <!-- 修改密码 -->
    <el-dialog
      title="修改密码"
      :visible.sync="dialogFormVisible"
      class="add-dialog"
      :destroy-on-close="true"
    >
      <el-form
        :model="aditForm"
        ref="aditForm"
        :rules="rules"
        class="add-form"
        label-width="140px"
      >
        <el-form-item prop="accountName" label="原密码:">
          <el-input
            v-model="aditForm.accountName"
            placeholder="请输入原密码"
          ></el-input>
        </el-form-item>
        <el-form-item prop="userName" label="新密码:">
          <el-input
            v-model="aditForm.userName"
            placeholder="请输入新密码"
          ></el-input>
        </el-form-item>
        <el-form-item label="">
          <el-input
            v-model="aditForm.userName"
            placeholder="请输入新密码"
          ></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button>取 消</el-button>
        <el-button type="primary">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: "information",
  data() {
    return {
      // 修改密码 - 弹框
      dialogFormVisible: false,
      aditForm: {
        accountName: "",
        userName: "",
        userName1: ""
      },
      rules: {}
    };
  },
  created() {},
  mounted() {},
  methods: {
    editOpen() {
      this.dialogFormVisible = true;
    }
  },
};
</script>
<style lang="scss" scoped>
.content {
  font-size: 16px;
  .header {
    h3 {
      font-weight: bold;
    }
  }
  .blue-bg::before {
    content: " ";
    width: 8px;
    height: 20px;
    background: #0782eb;
    display: inline-block;
    vertical-align: bottom;
    margin: 0px 5px;
  }

  .body {
    margin: 10px 5px;
    &-wrap {
      p {
        line-height: 30px;
        margin: 40px 0;
        font-size: 14px;
      }
      p:nth-child(1) {
        margin-top: 0px;
      }
      p:last-child {
        margin-bottom: 0px;
      }
    }
  }

  &-btn {
    text-align: center;
  }
}
</style>
